﻿@{
    ViewData["Title"] = "大文件上传";
}

@section Styles {
    <style type="text/css">
         
    </style>
}

<div  >
    <div class="input-group">
        <input type="text" value="请选择文件" size="20" name="upfile" id="upfile" class="a-control" readonly style="width:90%;" />
        <input type="button" value="浏览" onclick="path.click()" class="a-control" style="width:10%;" />
        <input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">

        @*<button type="button" id="file" onclick="UploadStart()" class="a-btn" value="上传">上传</button>*@
        <input type="button" value="上传" onclick="UploadStart()" id="file" />
    </div>

    <div class="input-group">
        <input name="FileUrl" id="FileUrl" type="text" class="a-control" data-bind="value:model().FileUrl" />
        <span class="input-group-btn">
            <span id="output" class="a-btn" style="width:50px">0%</span>
        </span>
    </div>
    <div id="msg"></div>
</div>

@section Scripts{
    <script src="/scripts/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        var UploadPath = "";
        //开始上传
        var begin;
        function UploadStart() {
            begin = new Date();            
            var objs = $("#path")[0].files;
            var arr = new Array();
            for (var i = 0; i < objs.length; i++) {
                arr.push(runAsync(objs[i], i));
            }
            Promise
                .all(arr)
                .then(function (results) {
                    var end = new Date();
                    var time = end - begin;
                });
        }

        function runAsync(file, i) {
            var p = new Promise(function (resolve, reject) {
                AjaxFile(file, i)
            });
            return p;
        }

        function AjaxFile(file, i) {
            var name = file.name, //文件名
                size = file.size, //总大小shardSize = 2 * 1024 * 1024,
                shardSize = 2 * 1024 * 1024,//以2MB为一个分片
                shardCount = Math.ceil(size / shardSize); //总片数

            if (i >= shardCount) {
                return;
            }
            //计算每一片的起始与结束位置
            var start = i * shardSize,
                end = Math.min(size, start + shardSize);
            //构造一个表单，FormData是HTML5新增的
            var form = new FormData();
            form.append("TempDir", "file");
            form.append("Data", file.slice(start, end)); //slice方法用于切出文件的一部分

            form.append("LastModified", file.lastModified);
            form.append("FileName", name);
            form.append("Total", shardCount); //总片数
            form.append("FileIndex", i + 1); //当前是第几片
            UploadPath = file.lastModified
            
            $.ajax({
                url: "/File/UploadBigFile",
                type: "POST",
                data: form,
                async: true, //异步
                processData: false, //很重要，告诉jquery不要对form进行处理
                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                success: function (result) {
                    if (result != null) {
                        i = result.currentIndex++;
                        var num = Math.ceil(i * 100 / shardCount);
                        $("#output").html(num + '%');
                        AjaxFile(file, i);
                        if (result.isMerge) {
                            $("#output").html('100%');
                            var filepath = $("#path");
                            filepath.after(filepath.clone().val(""));
                            filepath.remove();//清空input file
                            $('#upfile').val('请选择文件');
                            
                            var end = new Date();
                            var time = end - begin;
                            $("#msg").html("耗时" + time + "毫秒");
                            $("#FileUrl").val(result.webPath);
                        }
                    }
                }
            });
            
        }


    </script>
}